"use client";
import React, { useState } from "react";
import Image from "next/image";
import { message, Form, Input, Button } from "antd";

export default function CertificationPage() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        message.warning("请先登录后再提交申请");
        setLoading(false);
        return;
      }

      // 准备提交数据
      const submitData = {
        contact: values.contact.trim(),
        contactPhone: values.contactPhone.trim(),
        applyTime: new Date().toISOString(),
        remark: values.remark?.trim() || "",
      };

      // 调用API
      const response = await fetch("/api/application", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(submitData),
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }

      message.success("认证申请提交成功！我们会尽快与您联系");

      // 清空表单
      form.resetFields();
    } catch (error) {
      console.error("提交认证申请失败:", error);
      message.error("提交失败，请稍后重试");
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
           @keyframes scan {
             0% {
               transform: translateY(-15px);
               opacity: 0;
             }
             5% {
               opacity: 0.3;
             }
             10% {
               opacity: 1;
             }
             85% {
               opacity: 1;
             }
             95% {
               opacity: 0.3;
             }
             100% {
               transform: translateY(135px);
               opacity: 0;
             }
           }
         `,
        }}
      />
      <div className="bg-gradient-to-br from-blue-50 via-white to-indigo-50 pb-10">
        <div className="container mx-auto py-2 px-4">
          {/* 页面标题 */}
          <div className="text-center mb-3 my-10">
            <h1 className="text-4xl font-bold text-gray-800 mb-1">
              产品认证申请
            </h1>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto mb-10">
              专业的产品检测认证服务，为您的产品提供权威的质量认证
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-start max-w-6xl mx-auto">
            {/* 左侧：联系信息 */}
            <div className="flex flex-col justify-center items-center text-center">
              <div className="p-5">
                <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <svg
                    className="w-8 h-8 text-white"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                    />
                  </svg>
                </div>
                <h3 className="text-xl font-bold text-gray-800 mb-3">
                  联系我们
                </h3>
                <p className="text-gray-600 mb-4 text-sm">
                  如您的产品也需要认证，请和我们联系
                </p>
                <div className="bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-2xl font-bold py-2 px-4 rounded-lg mb-4 inline-block">
                  400-926-2888
                </div>
                <div className="flex flex-col items-center justify-center">
                  <div className="relative">
                    <Image
                      src="/images/qrcode.png"
                      width={240}
                      height={240}
                      alt="二维码"
                      className="rounded-lg"
                    />
                    {/* 四个角的装饰 */}
                    <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
                      {/* 左上角 */}
                      <div className="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-blue-500 rounded-tl-lg"></div>
                      {/* 右上角 */}
                      <div className="absolute top-0 right-0 w-6 h-6 border-t-2 border-r-2 border-blue-500 rounded-tr-lg"></div>
                      {/* 左下角 */}
                      <div className="absolute bottom-0 left-0 w-6 h-6 border-b-2 border-l-2 border-blue-500 rounded-bl-lg"></div>
                      {/* 右下角 */}
                      <div className="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-blue-500 rounded-br-lg"></div>
                    </div>
                    <div className="absolute inset-0 rounded-lg overflow-hidden">
                      <div
                        className="absolute top-0 left-0 w-full"
                        style={{
                          height: "4px",
                          background:
                            "linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.2) 20%, rgba(59, 130, 246, 1) 50%, rgba(59, 130, 246, 0.2) 80%, transparent 100%)",
                          borderRadius: "2px",
                          animation: "scan 2.5s ease-in-out infinite",
                          boxShadow:
                            "0 0 15px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4)",
                        }}
                      ></div>
                    </div>
                  </div>
                  <p className="text-sm text-gray-500 mt-2">扫码了解更多</p>
                </div>
              </div>
            </div>

            {/* 右侧：表单 */}
            <div className="bg-white rounded-3xl shadow-sm p-3 border border-gray-100">
              <div className="text-center mb-3">
                <div className="w-20 h-20 bg-gradient-to-r from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-1">
                  <svg
                    className="w-20 h-20 text-white"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                </div>
                <h2 className="text-4xl font-bold text-gray-800 mb-1">
                  认证申请
                </h2>
                <p className="text-gray-600 text-lg">
                  填写信息，我们将在24小时内与您联系
                </p>
              </div>

              <Form
                form={form}
                onFinish={handleSubmit}
                layout="vertical"
                size="middle"
                className="space-y-2"
              >
                <Form.Item
                  name="contact"
                  label={
                    <span className="text-sm font-semibold text-gray-700">
                      联系人姓名 <span className="text-red-500">*</span>
                    </span>
                  }
                  rules={[
                    { required: true, message: "请输入联系人姓名" },
                    { min: 2, message: "姓名至少2个字符" },
                  ]}
                >
                  <Input
                    placeholder="请输入您的姓名"
                    disabled={loading}
                    className="h-10 rounded-lg"
                  />
                </Form.Item>

                <Form.Item
                  name="contactPhone"
                  label={
                    <span className="text-sm font-semibold text-gray-700">
                      联系电话 <span className="text-red-500">*</span>
                    </span>
                  }
                  rules={[
                    { required: true, message: "请输入联系电话" },
                    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号" },
                  ]}
                >
                  <Input
                    placeholder="请输入您的手机号码"
                    disabled={loading}
                    className="h-10 rounded-lg"
                  />
                </Form.Item>

                <Form.Item
                  name="remark"
                  label={
                    <span className="text-sm font-semibold text-gray-700">
                      产品信息备注
                    </span>
                  }
                >
                  <Input.TextArea
                    placeholder="请描述您的产品信息或特殊要求..."
                    rows={3}
                    disabled={loading}
                    className="rounded-lg"
                  />
                </Form.Item>

                {/* 同意条款 */}

                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    loading={loading}
                    className="w-full h-10 border-none rounded-lg font-bold text-base transition-all bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700"
                  >
                    {loading ? "提交中..." : "提交认证申请"}
                  </Button>
                </Form.Item>
              </Form>

              {/* 底部提示 */}
              <div className="mt-6 text-center">
                <p className="text-sm text-gray-500">
                  提交后我们将在{" "}
                  <span className="font-semibold text-blue-600">24小时内</span>{" "}
                  与您联系
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
